<template>
  <div class="promotion">
    <head-nav :cname="titleName"></head-nav>
    <div class="sxcx">
      <div class="sxcx-header">
        <div class="h-l">
          <img src="../../../../assets/images/run/mszq/搜索.png" alt="" />
          <span>筛选条件</span>
        </div>
        <el-button type="primary" class="f-l" size="small" @click="searchL"
          >查询结果</el-button
        >
        <div onselectstart="return false" class="h-r" @click="handler">
          <img
            id="rot-img"
            src="../../../../assets/images/run/mszq/up.png"
            alt=""
          />
          <span id="text">收起筛选</span>
        </div>
      </div>
      <div id="sxcs-bdy" class="sxcx-body">
        <el-input
          class="i-css"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input"
        >
        </el-input>
      </div>
    </div>
    <div class="mszq-bdy">
      <div class="mshd">
        <div class="mszq-l">
          <img src="../../../../assets/images/run/mszq/kfjk.png" alt="" />
          <span>数据列表</span>
        </div>
        <div class="mszq-r">
          <span class="add-activity" onselectstart="return false" @click="addHd"
            >添加活动</span
          >
          <span class="add-activity" @click="addTimeList">添加时间列表</span>
          <select disabled name="xsts" id="xsts-list">
            <option value="xsts">显示条数</option>
          </select>
          <select disabled name="pxfs" id="xsts-list">
            <option value="pxfs">排序方式</option>
          </select>
        </div>
      </div>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="编号" width="100"> </el-table-column>
        <el-table-column prop="activeTitle" label="活动标题" width="180">
        </el-table-column>
        <el-table-column label="活动状态" width="180">
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            {{ scope.row.status ? '活动进行中' : '活动已完成' }}
            <!-- {{ Number(scope.row.status) === 1 ? '活动进行中' : '活动已完成' }} -->
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="180">
        </el-table-column>
        <el-table-column label="上架/下架" width="100">
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-switch
              v-model="scope.row.status"
              @change="changtTab(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a href="javascript:;" @click="settings(scope.row)">设置商品</a>
            <a href="javascript:;" class="edit-content" @click="edit(scope.row)"
              >编辑</a
            >
            <a href="javascript:;" @click="del(scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.currentPage"
        :page-sizes="[2, 4, 8, 16]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加活动模态框 -->
    <el-dialog
      title="添加活动"
      :visible.sync="addADFlag"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="addAdFrom"
        :rules="addAdRules"
        ref="addAdRef"
        label-width="100px"
        class="demo-ruleForm add-cs"
      >
        <el-form-item label="活动名称" prop="activeTitle">
          <el-input class="ipt-btn" v-model="addAdFrom.activeTitle"></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="time" required>
          <div class="block">
            <el-date-picker
              v-model="addAdFrom.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <label for="" class="pl"> 上线/下架</label>
        <el-radio v-model="addAdFrom.status" label="1">上线</el-radio>
        <el-radio v-model="addAdFrom.status" label="2">下架</el-radio>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="color-cs" @click="addADFlag = false">取 消</el-button>
        <el-button class="color-cs" type="primary" @click="addGet"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="编辑活动"
      :visible.sync="editContent"
      width="30%"
      :before-close="editClose"
    >
      <el-form
        :model="editForm"
        :rules="editRules"
        ref="editRefs"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动标题" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="时间设置" prop="timer">
          <el-date-picker
            v-model="editForm.timer"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上线/下架">
          <el-radio v-model="editForm.radio" label="1">上线</el-radio>
          <el-radio v-model="editForm.radio" label="0">下架</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editContent = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 编辑框
      editForm: {
        id: '',
        name: '',
        timer: '',
        radio: '1',
        startTime: '',
        endTime: ''
      },
      addAdFrom: {
        activeTitle: '',
        time: '',
        startTime: '',
        endTime: '',
        // 默认单选框样式
        status: '1'
      },
      titleName: '',
      input: '',
      tableData: [],
      pagesizes: 2,
      total: 0,
      params: {
        currentPage: 1,
        queryString: '',
        pagesize: 2
      },
      addADFlag: false,
      addAdRules: {
        activeTitle: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ],
        time: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'blur'
          }
        ]
      },
      // 编辑框的校验
      editRules: {
        name: [
          {
            required: true,
            message: '请输入需要更改的商品名称',
            trigger: 'blur'
          }
        ],
        timer: [
          {
            required: true,
            message: '请输入需要更改的商品名称',
            trigger: 'blur'
          }
        ]
      },
      // 编辑
      editContent: false
    }
  },
  methods: {
    getTime(time) {
      console.log(time, '当前时间')
      var date = new Date(time)
      let Y = date.getFullYear()
      let M = date.getMonth() + 1
      let D = date.getDate()
      return Y + '-' + M + '-' + D
    },
    // 点击确定编辑框
    editSubmit() {
      this.$refs.editRefs.validate(async v => {
        if (v) {
          // console.log('正确')
          let startTime = this.editForm.timer[0]
          let entTime = this.editForm.timer[1]
          let sTime = this.getTime(startTime)
          let eTime = this.getTime(entTime)
          this.editForm.startTime = sTime
          this.editForm.endTime = eTime
          const { data: res } = await this.$http.post(
            '/ActiveController/editActive',
            {
              params: this.editForm
            }
          )
          console.log(res)
          if (res.Flag !== true) {
            return this.$Toast('修改商品错误,请联系管理员', 'error')
          }
          this.$Toast('修改成功', 'success')
          this.getActivityList()
          this.editContent = false
        }
      })

      console.log(this.editForm.timer, 'editfrom')
    },
    // 关闭编辑框
    editClose() {
      this.editContent = true
      console.log('关闭编辑框')
    },
    // 点击查询
    searchL() {
      console.log(this.input, 'input')
      this.params.queryString = this.input
      this.input = ''
      this.getActivityList()
    },
    // 点击事件列表
    addTimeList() {
      this.$router.history.push('/time-list?name=时间段列表')
    },
    // 关闭活动模态框
    handleClose() {
      this.addADFlag = false
      console.log('关闭啦')
    },
    // 确定添加活动 发送请求
    addGet() {
      console.log(111)
      this.$refs.addAdRef.validate(async v => {
        // console.log(v)
        if (v) {
          // console.log(this.addAdFrom.time[0], '选择的时间')
          var stime = this.addAdFrom.time[0]
          var etime = this.addAdFrom.time[1]
          this.addAdFrom.startTime =
            stime.getFullYear() +
            '-' +
            (stime.getMonth() + 1) +
            '-' +
            stime.getDate()
          this.addAdFrom.endTime =
            etime.getFullYear() +
            '-' +
            (etime.getMonth() + 1) +
            '-' +
            etime.getDate()
          // console.log(this.addAdFrom, 'dasdsasdgd')
          this.addAdFrom.status = parseInt(this.addAdFrom.status)
          // console.log(this.addAdFrom)
          const { data: res } = await this.$http.get(
            '/ActiveController/addActive',
            {
              params: this.addAdFrom
            }
          )
          if (res.status !== 200) {
            this.$Toast('添加活动失败', 'error')
          }
          this.addADFlag = false
          this.getActivityList()
        }
      })
    },
    // 添加活动
    addHd() {
      this.addADFlag = true
    },
    handleSizeChange(newcurrentPage) {
      this.params.pagesize = newcurrentPage
      console.log(newcurrentPage)
      this.getActivityList()
    },
    handleCurrentChange(val) {
      this.params.currentPage = val
      this.getActivityList()
    },
    del(scp) {
      console.log(scp, '删除活动')
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$http.get(
            '/ActiveController/DeleteById',
            {
              params: {
                id: scp.id
              }
            }
          )
          console.log(res, 'shanchu huodong')
          if (res.Result.Flag !== true) {
            return this.$Toast('删除失败', 'error')
          }
          this.$Toast('删除成功', 'success')
          this.getActivityList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    edit(scp) {
      this.editContent = true
      this.editForm.id = scp.id
      this.editForm.radio = scp.status ? '1' : '0'
      console.log(this.editForm)
      console.log(scp)
      console.log('编辑')
    },
    // 点击设置商品
    settings(scp) {
      this.$router.history.push('/set?name=设置商品&id=' + scp.id)
      console.log(scp)
    },
    // 状态栏变化 上下架秒杀活动
    async changtTab(scp) {
      console.log(scp.status, 'stsatus scp')
      let boolean = scp.status ? 1 : 0
      const { data: res } = await this.$http.get(
        '/ActiveController/updateStatus',
        {
          params: {
            status: boolean,
            id: scp.id
          }
        }
      )
      if (res.Flag !== true) {
        return this.$Toast('上下架失败,请重试', 'error')
      }
      this.$Toast('修改状态成功', 'success')
      // console.log(res, 'aaaaa')
      this.getActivityList()
    },
    handler() {
      document.querySelector('#rot-img').className =
        document.querySelector('#rot-img').className === 'rta' ? 'rta1' : 'rta'
      document.querySelector('#text').innerText =
        document.querySelector('#text').innerText === '收起筛选'
          ? '展开筛选'
          : '收起筛选'
      // console.log(1)
      document.querySelector('#sxcs-bdy').className =
        document.querySelector('#sxcs-bdy').className === 'sxcx-body late'
          ? 'sxcx-body late1'
          : 'sxcx-body late'
    },
    async getActivityList() {
      const { data: res } = await this.$http.post(
        '/ActiveController/findPage',
        {
          pagination: this.params
        }
      )
      console.log(res)
      // console.log(res, 'res')
      if (res.Flag !== true) {
        return this.$Toast('获取数据失败', 'error')
      }
      this.$Toast('获取活动数据成功', 'success')
      res.data.forEach(item => {
        item.status = Boolean(item.status)
      })
      this.tableData = res.data
      // console.log(this.tableData, 'dsadasdasfasfas')
      this.total = res.total
      // this.params.pagesize = res.pagesize
    }
  },

  created() {
    this.titleName = this.$route.query.name
    this.getActivityList()
  }
}
</script>

<style lang="less" scope>
.el-form-item__content {
  text-align: left;
}
.el-range-editor {
  width: 100% !important;
}
.el-button span {
  color: #666 !important;
}
.ipt-btn {
  margin-top: 0;
}
.color-cs span {
  color: #666 !important;
}
.el-dialog__header {
  background: #f2f2f2;
  color: #666;
  font-weight: 700;
  text-align: center !important;
}
.el-pagination {
  line-height: 50px;
  padding: 0 !important;
  width: 1098px;
  margin: 0 auto;
  background: #fff;
}
.edit-content {
  margin: 0 10px;
}
a {
  text-decoration: none;
  color: #0099ff;
}
.el-table {
  width: 1100px !important;
  margin: 0 auto;
}

#xsts-list {
  color: #cccccc;
  padding: 9.5px 10px;
  background: #fff;
  border: 1px solid rgba(228, 228, 228, 1);
  padding-bottom: 11px;
  margin: 0 5px;
  outline: none;
}
.mszq-r {
  float: right;
  .add-activity {
    cursor: pointer;
    padding: 10px;
    border: 1px solid rgba(228, 228, 228, 1);
    margin: 0 5px;
    background: #fff;
  }
}
.add-activity:hover {
  background: #f3f3f3;
}

.mshd {
  width: 1100px;
  height: 50px;
  background: #f3f3f3;
  margin: 0 auto;
  margin-top: 20px;
  border: 1px solid rgba(228, 228, 228, 1);
  line-height: 50px;
  .mszq-l {
    float: left;
    margin-left: 10px;
    img {
      margin: 0 5px;
    }
  }
  img {
    width: 15px;
    vertical-align: middle;
  }
}
.f-l {
  float: right;
  margin: 0 10px !important;
  margin-top: 8px !important;
}
.i-css {
  margin-top: 0;
  width: 15% !important;
  float: left;
  margin-left: 20px;
}
@keyframes late {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}
@keyframes late1 {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes rta {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes rta1 {
  0% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0);
  }
}
.late1 {
  animation: late1 0.5s linear forwards;
}
.late {
  animation: late 0.5s linear forwards;
}
.rta {
  animation: rta 0.1s linear forwards;
}
.rta1 {
  animation: rta1 0.1s linear forwards;
}
.promotion {
  text-align: center;
}
.sxcx {
  position: relative;
  margin-top: 10px !important;
  width: 1100px;
  height: 100px;
  margin: 0 auto;
  .sxcx-header {
    line-height: 50px !important;
    border: 1px solid rgba(228, 228, 228, 1);

    .h-l {
      float: left;
      margin-left: 10px;
    }
    .h-r {
      cursor: pointer;
      float: right;
    }
    position: absolute;
    width: 100%;
    z-index: 2;
    height: 50px;
    background: #f3f3f3;
    border-bottom: 1px solid rgba(228, 228, 228, 1);
    img {
      width: 18px;
      vertical-align: middle;
    }
  }
  .sxcx-body {
    border: 1px solid rgba(228, 228, 228, 1);
    height: 50px;
    background: #fff;
    top: 50px;
    z-index: 1;
    width: 100%;
    position: absolute;
    line-height: 50px;
  }
}
</style>
